function pageRender(menu){
    if(menu.title === "日程安排"){
        return `<div class="box" id="app-main-${menu.index}">
        <div class="header-wrap">
            <div class="left">工单处理</div>
            <div class="right">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="工单编号:">
                        <el-input v-model="searchForm.number" placeholder="工单编号" />
                    </el-form-item>
                    <el-form-item label="流转状态:">
                        <el-select v-model="searchForm.status" placeholder="流转状态" clearable>
                            <el-option v-for="item in searchForm.options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="body-wrap">
        <el-table :data="tableData" style="width: 100%;height: calc(100vh - 300px);max-height: calc(100vh - 300px);overflow-y: auto;">
            <el-table-column type="expand">
                <template #default="{row}">
                    <el-table :data="row.family">
                        <el-table-column label="Name" prop="name"></el-table-column>
                        <el-table-column label="State" prop="state"></el-table-column>
                        <el-table-column label="City" prop="city"></el-table-column>
                        <el-table-column label="Address" prop="address"></el-table-column>
                        <el-table-column label="Zip" prop="zip"></el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="日期" prop="date"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="操作" fixed="right">
                <template #default="{row}">
                    <el-button link type="primary" size="small" :icon="Edit">修改</el-button>
                    <el-button type="text" :icon="Delete" style="color: red;">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" layout="prev, pager, next, jumper"
                :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
    
    <script type="module">
        (function () {
            const {
                createApp,
                reactive,
                toRefs,
                ref,
                defineComponent,
                h,
                computed,
                onMounted,
            } = Vue;
            const { Edit, Delete } = ElementPlusIconsVue;
            const vue3Composition1 = {
                setup() {
                    const searchForm = reactive({
                        number: "",
                        status: "审批中",
                        options: [
                            { label: "审批中", value: "审批中" },
                            { label: "通过", value: "通过" },
                            { label: "退回", value: "退回" },
                            { label: "草稿", value: "草稿" },
                        ]
                    })
                    const onSubmit = () => {
                        console.log("submit:", searchForm.options);
                    }
                    const btnClick = (e) => {
                        alert("hello!");
                    };
                    const currentPage = ref(1);
                    const pageSize = ref(100);
                    const handleSizeChange = (val) => {
                        console.log("size change:", val)
                    }
                    const handleCurrentChange = (val) => {
                        console.log("current page:", val)
                    }
                    const tableData = reactive([
                        {
                        date: '2016-05-03',
                        name: 'Tom1',
                        state: 'California',
                        city: 'San Francisco',
                        address: '3650 21st St, San Francisco',
                        zip: 'CA 94114111',
                        family: [
                            {
                            name: 'Jerry',
                            state: 'California',
                            city: 'San Francisco',
                            address: '3650 21st St, San Francisco',
                            zip: 'CA 94114',
                            },
                            {
                            name: 'Spike',
                            state: 'California',
                            city: 'San Francisco',
                            address: '3650 21st St, San Francisco',
                            zip: 'CA 94114',
                            },
                            {
                            name: 'Tyke',
                            state: 'California',
                            city: 'San Francisco',
                            address: '3650 21st St, San Francisco',
                            zip: 'CA 94114',
                            },
                        ],
                        },
                        {
                        date: '2016-05-02',
                        name: 'Tom2',
                        state: 'California',
                        city: 'San Francisco',
                        address: '3650 21st St, San Francisco',
                        zip: 'CA 94114222',
                        family: [
                            {
                            name: 'Jerry',
                            state: 'California',
                            city: 'San Francisco',
                            address: '3650 21st St, San Francisco',
                            zip: 'CA 94114',
                            },
                            {
                            name: 'Spike',
                            state: 'California',
                            city: 'San Francisco',
                            address: '3650 21st St, San Francisco',
                            zip: 'CA 94114',
                            },
                            {
                            name: 'Tyke',
                            state: 'California',
                            city: 'San Francisco',
                            address: '3650 21st St, San Francisco',
                            zip: 'CA 94114',
                            },
                        ],
                        },
                        {
                        date: '2016-05-04',
                        name: 'Tom3',
                        state: 'California',
                        city: 'San Francisco',
                        address: '3650 21st St, San Francisco',
                        zip: 'CA 94114333',
                        family: [
                            {
                            name: 'Jerry',
                            state: 'California',
                            city: 'San Francisco',
                            address: '3650 21st St, San Francisco',
                            zip: 'CA 94114',
                            },
                            {
                            name: 'Spike',
                            state: 'California',
                            city: 'San Francisco',
                            address: '3650 21st St, San Francisco',
                            zip: 'CA 94114',
                            },
                            {
                            name: 'Tyke',
                            state: 'California',
                            city: 'San Francisco',
                            address: '3650 21st St, San Francisco',
                            zip: 'CA 94114',
                            },
                        ],
                        },
                        ])
                    return {
                        btnClick,
                        searchForm,
                        onSubmit,
                        tableData,
                        currentPage,
                        pageSize,
                        handleSizeChange,
                        handleCurrentChange,
                        Edit,
                        Delete,
                    }
                }
            };
            const app1 = createApp(vue3Composition1);
            for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
                app1.component(name, comp);
            }
            app1.use(ElementPlus).mount("#app-main-${menu.index}");
            return app1;
        })();
    </script>
    
    <style>
        .box {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: #fff;
        }
        #app-main-${menu.index} .header-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    
        #app-main-${menu.index} .header-wrap .left {
            font-size: 20px;
            font-family: 'SimSun', PingFangSC-Regular, sans-serif;
            font-weight: bold;
        }
    
        #app-main-${menu.index} .header-wrap .right {}
    
        #app-main-${menu.index} .body-wrap {
            flex: 1;
        }
        #app-main-${menu.index} .pagination {
            padding: 10px 0;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }
    </style>`
    }
}
